<template lang="pug">
  .jigsaw-page-list
    el-row
      title-16(style="width: 50%;float:left") {{config.title}}
      div(style="width: 50%;float:left;text-align:right;font-size: 22px;")
        svg-html-icon(:value="backHtml" style="cursor: pointer" @click.native="$router.back()")
    el-row.mb-15
      normal-search-input(:placeholder="'请输入想要查找的'+config.moduleName" v-model='search' @search="refresh($event)").float-left(style="width: calc(100% - 118px)")
      button-add.float-right(@click="create_" v-if="config.permission.create()") 新增
    el-row(style="height:calc(100% - 82px)")
      decorate-pagination(listKey="rows" :is-async="true" :page="1", :page-size="10" :async-method="asyncMethod" ref="table")
        el-table(border :data="scope.filteredData" slot-scope="scope" :height="scope.tableHeight")
          template(v-for="column in config.columns")
            el-table-column(v-if="column.render" :label="column.label")
              template( slot-scope="scope")
                render-scope-component(:_scope="scope" :render="column.render")
            el-table-column(v-else :prop="column.prop" :label="column.label")
          el-table-column( label="操作")
            template(slot-scope="scope")
              button-svg(icon-class="详情"  title="详情"  @click.native="details_(scope.row)" v-if="config.permission.details(scope.row)").mr-2
              button-svg(icon-class="编辑"  title="编辑"  @click.native="update_(scope.row)" v-if="config.permission.update(scope.row)").mr-2
              button-svg(icon-class="删除"  title="删除"  @click.native="delete_(scope.row.id)" v-if="config.permission.delete(scope.row)")
</template>

<script>
import JsonForm from '../../../common/components/myForm/jsonForm'
import { openDialog } from '../../../common/components/jsDialog/jsDialog'
import DecoratePagination from '../../../common/components/decoratePagination/decoratePagination'
import ButtonSvg from '../../../common/plugins/svgIcon/buttonSvg'
import _ from 'lodash'
import Title16 from '../../../common/components/ui/title-16/index'
import NormalSearchInput from '../../../common/components/ui/normal-search-input/normal-search-input'
import ButtonAdd from '../../../common/components/ui/button/button-add'
import RenderScopeComponent from './renderScopeComponent'
import SvgHtmlIcon from '../svgHtmlIcon/svgHtmlIcon'

export default {
  name: 'pageListComponent',
  components: {
    SvgHtmlIcon,
    RenderScopeComponent,
    NormalSearchInput,
    Title16,
    DecoratePagination,
    ButtonSvg,
    ButtonAdd
  },
  props: ['config'],
  data() {
    return {
      data: [],
      ready: false,
      search: '',
      backHtml: `<svg t="1551790084884" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2056" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
    <defs>
        <style type="text/css"></style>
    </defs>
    <path d="M460.448 254.592l0 139.968 33.792 0.32c234.72 2.272 366.912 106.656 401.376 318.208-128.928-149.152-277.6-149.216-401.024-149.248l-34.144 0 0 138.784-316.288-224.032 316.288-224zM494.592 188.576l-409.44 290.016 409.44 290.016 0-170.624c163.872 0.064 315.808 8.32 444.288 237.44 0-145.504-24.032-470.592-444.288-474.656l0-172.192z"
          p-id="2057"></path>
</svg>`
    }
  },
  created() {
    let config = this.config
    if (!config.permission) {
      config.permission = {}
    }
    config.permission = Object.assign({
      create: () => true,
      delete: () => true,
      update: () => true,
      details: () => true,
    }, config.permission)
    
  },
  methods: {
    asyncMethod(pageSize, page, customFlag) {
      this.ready = false
      let query
      if (!customFlag) {
        query = this.lastQuery || {}
      } else {
        query = _.assign(query, { [this.config.queryKey]: this.search })
      }
      this.lastQuery = _.cloneDeep(query)
      return this.config.api.list(page, pageSize, query).then((data) => {
        this.ready = true
        return data
      })
    },
    refresh() {
      this.$refs.table.refresh(true)
    },
    details_(row) {
      openDialog({
        component: JsonForm,
        width: '600px',
        componentProps: {
          isDetailsPage: true,
          config: this.config.formConfig,
          value: row
        },
        title: `查看${this.config.moduleName}`,
        afterConfirm: (data) => {
          this.config.api.update(data.id, data).then(() => {
            this.refresh()
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          })
        }
      })
    },
    create_() {
      openDialog({
        component: JsonForm,
        width: '600px',
        componentProps: {
          config: this.config.formConfig
        },
        title: `新增${this.config.moduleName}`,
        afterConfirm: (data) => {
          this.config.api.create(data).then(() => {
            this.refresh()
            this.$message({
              message: '创建成功',
              type: 'success'
            })
          })
        }
      })
    },
    update_(row) {
      openDialog({
        component: JsonForm,
        width: '600px',
        componentProps: {
          config: this.config.formConfig,
          value: row,
          editReadonlyList: this.config.editReadonlyList
        },
        title: `修改${this.config.moduleName}`,
        afterConfirm: (data) => {
          this.config.api.update(data.id, data).then(() => {
            this.refresh()
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          })
        }
      })
    },
    delete_(id) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.config.api.delete(id).then(_ => {
          this.refresh()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .mb-15 {
    margin-bottom: 15px;
  }
  
  .jigsaw-page-list {
    box-sizing: border-box;
    padding: 20px 25px;
    background: white;
    width: 100%;
    height: 100%;
  }
</style>
